<template>
  <scroll
    class="scroll"
    ref="scroll"
    :probe-type="3"
    @scrollEvent="scrollEvent"
  >
    <div class="shop-evaluate-list">
      <div
        v-for="(item, index) in shopCommodityList"
        :key="index"
        class="item"
        ref="listItem"
      >
        <p class="title">
          <span class="name">
            {{ item.name }}
          </span>
          <span class="desc">
            {{ item.description }}
          </span>
          <span class="spot" @click="handleContrlRemind">...</span>
          <span class="remind" v-show="controlRemind"
            >{{ item.name }} {{ item.description }}</span
          >
        </p>
        <div class="food-list">
          <div
            v-for="(value, indey) in item.foods"
            :key="indey"
            class="food"
          
          >
            <div   @click="handleListItemDetail(value)">
              <div
              :class="{ news: value.attributes[0].icon_name === '新' }"
              v-if="value.attributes[0]"
            ></div>
            <span
              class="ordinary"
              :class="{ 'text-rotate': value.attributes[0].icon_name === '新' }"
              v-if="value.attributes[0]"
              >新品</span
            >
            <img
              :src="`http://elm.cangdu.org/img/${value.image_path}`"
              alt=""
              @load="handleDressImg"
            />
            </div>
            <div class="text">
              <div  @click="handleListItemDetail(value)">
                <p class="header">
                <span class="name">{{ value.name }}</span>
                <span
                  :class="{ icon: value.attributes[0].icon_name === '招牌' }"
                  :style="{
                    color: `#${value.attributes[0].icon_color}`,
                    border:
                      value.attributes[0].icon_name === '招牌'
                        ? `1px solid #${value.attributes[0].icon_color}`
                        : '',
                  }"
                  v-if="value.attributes[0]"
                  >{{ value.attributes[0].icon_name | judgeIconName }}</span
                >
              </p>
              <p class="desc">{{ value.description }}</p>
              <p class="tips">
                {{ value.tips | tipSplit }} 好评率{{ value.satisfy_rate }}%
              </p>
              </div>
              <p
                class="activity"
                v-if="value.activity"
                :style="{
                  color: `#${value.activity.image_text_color}`,
                  border: `1px solid #${value.activity.icon_color}`,
                }"
              >
                {{ value.activity.image_text }}
              </p>
              <p class="footer">
                <span>
                  <span class="price"
                    ><span class="sign">¥</span
                    >{{ value.specfoods[0].price }}</span
                  >
                  起
                </span>
                <shop-bolt
                  v-if="value.specfoods[1]"
                  :restaurant_id="value.restaurant_id"
                  :category_id="value.category_id"
                  :item_id="value.item_id"
                  :food_id="value.specfoods[0].food_id"
                  :plus-show="false"
                  :price="value.specfoods[0].price"
                  :name="value.name"
                  style="margin-left: 60px"
                />
                <span
                  class="specifications"
                  v-if="value.specfoods[1]"
                  @click="handleOpenSpecification(value)"
                  >选规格</span
                >
                <shop-bolt
                  v-else
                  :restaurant_id="value.restaurant_id"
                  :category_id="value.category_id"
                  :item_id="value.item_id"
                  :food_id="value.specfoods[0].food_id"
                  :price="value.specfoods[0].price"
                  :packing_fee="value.specfoods[0].packing_fee"
                  :name="value.name"
                />
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- 选规格
    <shop-specifications :is-open-specification="isOpenSpecification" /> -->
    </div>
  </scroll>
</template>

<script>
import Scroll from "components/common/betterScroll/Scroll";

import ShopSpecifications from "./childComps/ShopSpecifications";
import ShopBolt from "./childComps/ShopBolt";

import { debounce } from "common/utils";

import { mapGetters } from "vuex";
export default {
  data() {
    return {
      offsetTops: [],
      currentIndex: -1,
      controlRemind: false,
      subordinateObj: {},
      lowestLevelObj: {},
      goodsCount: {},
      arr: {},
      payload: {},
    };
  },
  computed: {
    ...mapGetters(["shopCommodityList", "goods"]),
    num() {
      JSON.parse(localStorage.getItem("buyCart"));
    },
  },
  created() {
    let func = debounce(this.handleDressImg);
    func();

    localStorage.getItem("buyCart")
      ? ""
      : localStorage.setItem("buyCart", JSON.stringify({}));
  },
  mounted() {
    this.$bus.$on("handleCommodityListItemBtn", (index) => {
      this.$refs.scroll && this.$refs.scroll.scrollTo(0, -this.offsetTops[index]);
    });
  },
  filters: {
    tipSplit(value) {
      return value.split(" ")[1];
    },
    judgeIconName(name) {
      return name === "招牌" ? name : "";
    },
    count(value) {},
  },
  methods: {
    handleOpenSpecification(value) {
      this.$emit("handleOpenSpecification", value);
    },
    scrollEvent(position) {
      // 这里的操作是根据scroll的滚动来实现ShopCommodityList按钮的联动效果
      // currentIndex是为了解决在滚动时多次拿到i值的问题,是对性能的优化
      for (let i = 0; i < this.offsetTops.length; i++) {
        if (
          this.currentIndex !== i &&
          ((i < this.offsetTops.length - 1 &&
            position.y < -this.offsetTops[i] &&
            position.y > -this.offsetTops[i + 1]) ||
            (i === this.offsetTops.length - 1 &&
              position.y > -this.offsetTops[this.offsetTops - 1]))
        ) {
          this.$bus.$emit("scrollEvent", i);
          this.currentIndex = i;
        }
      }
    },
    handleDressImg() {
      const arr = [];
      for (const key in this.$refs.listItem) {
        arr.push(this.$refs.listItem[key].offsetTop);
        this.offsetTops = arr;
      }
    },
    handleContrlRemind() {
      this.controlRemind = !this.controlRemind;
    },
    handleGoodsCount() {
      const buyCart = JSON.parse(localStorage.getItem("buyCart"));
    },
    handleListItemDetail(value) {
      console.log(value);
      this.$router.push({
        path: "/shop/foodDetail",
        query: {
          image_path: value.image_path,
          description: value.description,
          month_sales: value.month_sales,
          name: value.name,
          rating: value.rating,
          rating_count: value.rating_count,
          satisfy_rate: value.satisfy_rate,
          shopId: value.restaurant_id,
          price: value.specfoods[0].price
        },
      });
    },
  },
  components: {
    Scroll,
    ShopSpecifications,
    ShopBolt,
  },
};
</script>
<style lang="less" scoped>
.scroll {
  height: 100%;
  flex: 1;
}
.shop-evaluate-list {
  .item {
    background-color: #f5f5f5;
    .title {
      position: relative;
      padding: 20px 10px 10px;
      .name {
        font-weight: 900;
        font-size: 18px;
        color: #4a4a4a;
      }
      .desc {
        font-size: 12px;
        color: #a3a3a3;
      }
      .spot {
        position: absolute;
        top: 10px;
        right: 10px;
      }
      .remind {
        position: absolute;
        top: 32px;
        right: 10px;
        width: 160px;
        height: 40px;
        line-height: 40px;
        text-align: left;
        padding: 0 5px;
        border-radius: 5px;
        background-color: #434144;
        font-size: 12px;
        color: #fff;
        &::after {
          content: "";
          position: absolute;
          top: -5px;
          right: 8px;
          width: 0;
          height: 0;
          border-top: 10px solid transparent;
          border-left: 10px solid #434144;
          transform: rotate(135deg);
        }
      }
    }
    .food-list {
      background-color: #fff;
      .food {
        display: flex;
        flex-wrap: wrap;
        position: relative;
        padding: 20px 10px;
        border-bottom: 1px solid #eaeaea;
        .news {
          position: absolute;
          top: 0;
          left: 0;
          width: 0px;
          height: 0px;
          border-top: 40px solid transparent;
          border-left: 40px solid #4cd964;
          transform: rotate(90deg);
        }
        .ordinary {
          font-size: 0;
        }
        .text-rotate {
          position: absolute;
          top: 8px;
          left: 2px;
          transform: rotate(-45deg);
          font-size: 10px;
          color: #fff;
        }
        img {
          width: 48px;
          height: 48px;
        }
        .text {
          flex: 1;
          margin-left: 10px;
          font-size: 12px;
          .header {
            display: flex;
            justify-content: space-between;
            word-break: break-all; //让字母根据宽度进行换行显示
            .name {
              font-weight: 900;
              font-size: 15px;
              color: #333333;
            }
            .icon {
              height: 15px;
              padding: 2px;
              border-radius: 5px;
              font-size: 8px;
            }
          }
          .desc {
            margin: 10px 0;
          }
          .tips {
            font-weight: 700;
            color: #333333;
          }
          .activity {
            display: inline-block;
            padding: 2px;
            border-radius: 5px;
            margin: 10px 0 10px -5px;
            font-size: 8px;
          }
          .footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .price {
              font-weight: 900;
              font-size: 18px;
              color: #ff7417;
              .sign {
                font-size: 12px;
              }
            }
            .specifications {
              padding: 4px 2px;
              border-radius: 5px;
              background-color: #3190e8;
              color: #fff;
            }
          }
        }
      }
    }
  }
}
</style>
